<script setup lang="ts">
import { ref } from 'vue';
import { ElImage, ElImageViewer, ElUpload } from 'element-plus';

const normalizedValue = defineModel<string[]>({ default: () => [] });

const fileList = ref();

const showPreview = ref<boolean>(false);
const initialValue = ref<number>(0);

const handlePreview = (val: number) => {
  initialValue.value = val;
  showPreview.value = true;
};

const handleRemove = (url: string) => {
  try {
    normalizedValue.value = normalizedValue.value.filter(item => item !== url);
  } catch (error) {
    console.error('移除文件时出错:', error);
  }
};

// 如果需要处理上传的文件，可以添加以下逻辑
/* const handleUpload = () => {
  try {
    normalizedValue.value = fileList.value.map(file => file.url);
    fileList.value = [];
  } catch (error) {
    console.error('上传文件时出错:', error);
  }
}; */
</script>

<template>
  <div class="x-row">
    <div v-for="(item, index) in normalizedValue" :key="index" class="x-span">
      <div class="x-span-mask">
        <div class="x-icon-inline">
          <icon-local-zoom-in class="x-icon text-icon" @click="handlePreview(index)" />
          <icon-local-delete1 class="x-icon text-icon" @click="handleRemove(item)" />
        </div>
      </div>
      <ElImage :src="item" fit="cover" />
    </div>
    <div class="x-span">
      <ElUpload
        v-model:file-list="fileList"
        class="uploader"
        v-bind="$attrs"
        action="#"
        :show-file-list="false"
        :auto-upload="false"
        accept="image/*"
      >
        <icon-ic-round-plus class="x-upload-iocn text-icon" />
      </ElUpload>
    </div>
  </div>
  <ElImageViewer
    v-if="showPreview"
    :url-list="normalizedValue"
    :show-progress="true"
    teleported
    :initial-index="initialValue"
    @close="showPreview = false"
  />
</template>

<style scoped>
.x-row {
  display: flex;
  flex-wrap: wrap;
}
.x-span {
  --x-w: 120px;
  --x-h: 120px;
  width: var(--x-w);
  height: var(--x-h);
  margin: 5px 10px 5px 0;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.x-span-mask {
  width: var(--x-w);
  height: var(--x-h);
  line-height: var(--x-h);
  text-align: center;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}
.x-icon-inline {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.x-icon {
  font-size: 22px;
  color: #fff;
  margin: 6px;
  cursor: pointer;
}
.x-span:hover .x-span-mask {
  display: block;
}
.x-upload-iocn {
  font-size: 30px;
  color: #93959b;
}
.el-image {
  width: 100%;
  height: 100%;
}
:deep(.uploader) {
  width: 100%;
  height: 100%;
}
:deep(.uploader) .el-upload {
  width: 100%;
  height: 100%;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
:deep(.uploader) .el-upload:hover {
  border-color: var(--el-color-primary);
}
</style>
